<template>
  <div class="content">
    <div class="info">
      <div v-for="(item,index) in infoList1" :key="index">{{item.label}}</div>
    </div>
    <div class="info info2">
      <div v-for="(item,index) in infoList2" :key="index">{{item.label}}</div>
    </div>
    <p class="hint">物流信息：</p>
    <i-steps :current="verticalCurrent" direction="vertical">
      <i-step v-for="(item,index) in list" :key="index">
        <view slot="title">{{item.content}}</view>
        <view slot="content">{{item.time}}</view>
      </i-step>
    </i-steps>
  </div>
</template>

<script>
import { FIND_LOGISTICS_QUERY } from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      verticalCurrent: 1,
      list: [],
      form: {}
    }
  },
  computed: {
    infoList1 () {
      return [
        {
          label: `快递公司：${this.form.site || '暂无'}`
        },
        {
          label: `快递号：${this.form.no || '暂无'}`
        }
      ]
    },
    infoList2 () {
      return [
        {
          label: `配送员：${this.form.name || '暂无'}`
        },
        {
          label: `电话：${this.form.phone || '暂无'}`
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.findLogisticsQuery()
  },
  methods: {
    /** api **/
    findLogisticsQuery (item) {
      const vm = this
      FIND_LOGISTICS_QUERY(
        getCurrentPageParams('orderNo') || '356102259999768576'
      )
        .then(r => {
          if (r.data.code === '0') {
            let { list, site, no, name, phone } = r.data.data
            vm.form = {
              site,
              no,
              name,
              phone
            }
            vm.list = list
            vm.verticalCurrent = list.length
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  width: 95%;
  margin: auto;
  > .info {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
  }
  > .info2 {
    border: 0;
  }
  > .hint {
    font-size: 14px;
    color: #000;
    line-height: 40px;
  }
}
</style>
